<template>
  <el-dialog width="600px" :title="dialogTitle" :visible.sync="dialogVisible" @close="handleClose">
    <el-form
      ref="submitForm"
      v-loading="formLoading"
      :model="submitForm"
      label-width="100px"
      label-position="right"
      :rules="submitFormRules"
    >
      <el-form-item label="排产编号" prop="produceNo">
        <el-input
          v-model="produceInfo.produceNo"
          disabled
          placeholder="请选择排产编号"
          readonly
        />
      </el-form-item>
      <el-descriptions :column="3" style="padding-left: 100px">
        <el-descriptions-item label="客户">
          {{ produceInfo.customerName }}
        </el-descriptions-item>
        <el-descriptions-item label="品名">
          {{ productInfo.moldName }}
        </el-descriptions-item>
        <el-descriptions-item label="颜色">
          {{ productInfo.color }}
        </el-descriptions-item>
        <el-descriptions-item label="材质">
          {{ productInfo.material }}
        </el-descriptions-item>
        <el-descriptions-item label="尺码">
          {{ productInfo.size }}
        </el-descriptions-item>
        <el-descriptions-item label="长度">
          {{ productInfo.length }}
        </el-descriptions-item>
        <el-descriptions-item label="总数" content-class-name="red">
          {{ produceInfo.quantity }}
        </el-descriptions-item>
        <el-descriptions-item label="余数" content-class-name="red">
          {{ produceInfo.remainingQuantity }}
        </el-descriptions-item>
      </el-descriptions>
      <el-form-item label="日期" prop="outputDate">
        <el-date-picker
          v-model="submitForm.outputDate"
          style="width: 100%"
          type="date"
          placeholder="请选择生产日期"
          value-format="yyyy-MM-dd"
        />
      </el-form-item>
      <el-form-item label="班次" prop="shiftId">
        <el-select v-model="submitForm.shiftId" style="width: 100%;" placeholder="请选择班次">
          <el-option
            v-for="item in shiftList"
            :key="item.id"
            :label="item.name"
            :value="item.id"
          />
        </el-select>
      </el-form-item>
      <el-form-item label="产量" prop="quantity">
        <el-input
          v-model="submitForm.quantity"
          placeholder="请输入产量"
          style="width: 100%;"
          type="number"
        />
      </el-form-item>
    </el-form>
    <span slot="footer" class="dialog-footer">
      <el-button :loading="formLoading" type="text" @click="handleClose">取消</el-button>
      <el-button :loading="formLoading" type="primary" @click="handleSubmit">提交</el-button>
    </span>
  </el-dialog>
</template>

<script>
import { saveOutput, updateOutputById } from '@/api/erp/output'
import { selectAllShift } from '@/api/erp/shift'
import moment from 'moment'
/**
 * @author yizuomin
 * @date 2023/5/7 19:05
 **/
export default {
  name: 'SubmitOutputModule',
  props: {
    visible: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
      dialogVisible: this.visible,
      dialogTitle: '',
      formLoading: false,
      shiftList: [],
      submitForm: {
        shiftId: '',
        produceId: '',
        quantity: '',
        outputDate: ''
      },
      produceInfo: {},
      productInfo: {},
      submitFormRules: {
        shiftId: [{ required: true, message: '请选择班组', trigger: 'change' }],
        quantity: [{ required: true, message: '请输入产量', trigger: 'change' }],
        outputDate: [{ required: true, message: '请选择日期', trigger: 'change' }]
      }
    }
  },
  methods: {
    init(row) {
      this.dialogTitle = '生产登记'
      this.submitForm.produceId = row.id
      this.submitForm.outputDate = moment().format('YYYY-MM-DD')
      this.produceInfo = row
      this.productInfo = row.productInfo
      this.selectAllShift()
    },
    selectAllShift() {
      this.formLoading = true
      selectAllShift().then(resp => {
        if (resp.success) {
          this.shiftList = resp.data
        }
      }).finally(() => {
        this.formLoading = false
      })
    },
    handleSubmit() {
      this.$refs.submitForm.validate((valid) => {
        if (valid) {
          this.registration()
        }
      })
    },
    registration() {
      this.formLoading = true
      let request = saveOutput
      if (this.submitForm.id) {
        request = updateOutputById
      }
      request(this.submitForm).then(res => {
        if (res.success) {
          this.$message.success('登记成功')
          this.$refs.submitForm.resetFields()
          this.handleClose()
        }
      }).finally(() => {
        this.formLoading = false
      })
    },
    handleClose() {
      this.submitForm.quantity = ''
      this.$emit('close')
    }
  }
}
</script>

<style scoped>

</style>
